<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<link rel="stylesheet" href="../css/common.css">
		<link rel="stylesheet" href="../css/mobile-ui1.0-compress.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/axios.min.js"></script>

		<script src="../css/mobile-ui1.0-compress.js"></script>

		<style type="text/css">
			.app {
				width: 100%;
			}

			li {
				list-style: none;
			}

			.YmContent {
				width: 100%;
				height: 100%;
			}

			.price {
				white-space: normal;
				    width: auto;
				    height: 12px;
				    padding: 0px;
				    margin-top: 8px;
				    margin-left: 2px;
				    -webkit-border-radius: 0px;
				    border-radius: 0px;
				    color: #fff;
				    font-size: 16px;
				    line-height: 12px;
			}

			.line {
				width: 90%;
				height: 1px;
				padding: 0px;
				/* margin-top: 21px; */
				margin: 21px auto 0;
				/* margin-left: 17px; */
				background-color: #e1e1e1;
				-webkit-border-radius: 0px;
				border-radius: 0px;
				font-size: 0.5px;
				line-height: 1px;
			}

			.text-1 {
				font-weight: bold;
				color: #000000;
				font-size: 15px;
				line-height: 20px;
				margin-left: 10px;
			}

			.content {
				white-space: normal;
				width:80%;
				height: 181px;
				padding: 0px;
				clear: both;
				margin-top: 6px;
				margin-left: 10px;
				-webkit-border-radius: 0px;
				border-radius: 0px;
				color: #8a8e97;
				font-size: 14px;
				line-height: 20px;
			}

			.commodity_details_3 {
				margin-left: 10px;
			}

			.kclist {
				font-weight: bold;
				color: #000000;
				font-size: 15px;
				line-height: 20px;
				margin-left: 10px;
			}
.commodity_details_1{
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
}
			.but {
				white-space: normal;
				width: 80%;
				height: 50px;
				overflow: hidden;
				padding: 0px;
				/* margin: 16px auto; */
				/* margin-top: 16px; */
				/* margin-left: 29px; */
				background-color: red;
				-webkit-border-radius: 15px;
				border-radius: 15px;
				font-size: 4px;
				text-align: center;
				/* margin-bottom: 22px; */
				line-height: 50px;
				position: fixed;
				bottom: 10px;
				left: 50%;
				margin-left: -42%;
			}

			.but-text {
				white-space: normal;
				width: 93px;
				height: 21px;
				padding: 0px;
				-webkit-border-radius: 0px;
				border-radius: 0px;
				color: #ffffff;
				font-size: 18px;
				line-height: 21px;
			}
			.list{
				margin-left: 10px;
			}
			 a{ text-decoration:none; color:black;}  
		      a:hover{text-decoration:none; color:#336699;}
		       #tab{width:100%;height:150px;}
		       #tab ul{list-style: none;
						width: 100%;
						margin: 0 auto;
						height: 30px;
						line-height: 30px;
						border-bottom: 2px solid #e1e1e1;
				}
		       #tab ul li{
				   background:#FFF;
				   cursor:pointer;
				   float:left;
				   list-style:none ;
				   height:29px;
				   line-height:29px;
				   padding:0px 10px; 
				   margin:0px 10px;
				   font-size: 18px;
				}
		       #tab ul li.on{
				   color: #09f;
				   border-bottom: 2px solid #09f;
				   }
			firstPage,secondPage{height: 100px;
					width: 100%;
					margin: 0px auto;
					line-height: 24px;
					border-top: none;
					/* border: 1px solid #336699; */}
		       .hide{display:none;}
			   .yuanjia{
				   font-size: 12px;
				   text-decoration: line-through;
				   
			   }
			   .name{
				   font-size: 16px;
				   /* margin-left: 10px; */
				   font-weight: bold;
				   /* margin-bottom: 16px; */
				   padding: 12px 0 16px 12px;
				   border-bottom: 5px solid #e1e1e1;
			   }
			.clouseList{
				width: 100%;
				/* height: 48px; */
				border-bottom: 1px solid #e1e1e1;
				font-size: 16px;
				padding: 10px 0;
			}
			.list-a{
				display: inline-block;
				width: 90%;
				text-decoration: none;
				color: black;
				/* display: inline-block; */
				/* margin: 0px auto; */
				padding-left: 12px;
			}
			.online{
				width: 4px;
				height: 20px;
				background-color: red;
			}
			.title{
				display: flex;
				margin-top: 8px;
				margin-left: 6px;
			}
			.text{
				margin-left: 12px;
			}
			.num{
				font-size: 12px;
				display: inline-block;
				width: 90%;
				height: 24px;
				line-height: 24px;
				text-decoration: none;
				color: black;
				/* display: inline-block; */
				/* margin: 0px auto; */
				padding-left: 12px;
				color: #ccc;
			}
			#firstPage img{
				width: 100%
			}
		</style>
	</head>
	<body>
		<div class="app">
			<div class="YmContent">
				<div class="commodity_details_1">
					<img :src="obj.bigImg" alt="" style="width: 100%;">
					<!-- <image  v-if="obj.bigImg!=''" :src="obj.bigImg"
					 mode="scaleToFill" border="0" class="commodity_details_2"></image>
					 <image v-else src="../../static/img/mescroll-empty.png"  
					 mode="scaleToFill" border="0" class="commodity_details_2"></image> -->
					<div class="name">
						<span>{{obj.name}}</span>
					</div>
					<div id = "tab">
				         <ul>
							 <li class="off">课程介绍</li>
							 <li class="on">课程列表</li>
				         </ul>
				     
				     <div id="firstPage" class="hide" v-html="obj.context" style="width:96%;padding:0 2%">

				     </div>
					 <div id="secondPage" class="show">
						 <div class="title">
							 <div class="online"></div>
							 <div class="text" >
								 <span>课程列表</span>
							 </div>
						 </div>
						 <div style="margin-top:8px">
							 <li v-for="item in obj.lstCourse" @click="video(item)" class="clouseList">
								 <a class="list-a" href = "#">{{item.courseName}}</a><br>
								 <span class="num">
									 61.0万次学习
								 </span>
							 </li>

						 </div>
					 </div>
						<div class="but"v-show="butisshow">
							<span class="but-text" @click="xiadan">
								<span class="price">券后价￥{{obj.realPrice}}</span>
								<span class="price yuanjia">￥{{obj.price}}</span>
							</span>
						</div>
				 </div>
				</div>

			</div>
		</div>
		</div>
		</div>
		</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var h=document.documentElement.clientHeight;
	var dom=document.getElementsByClassName("app")[0];
	dom.style.height=h+"px";
 	window.onload = function(){
		var myTab = document.getElementById("tab");    //整个div
		var myUl = myTab.getElementsByTagName("ul")[0];//一个节点
		var myLi = myUl.getElementsByTagName("li");    //数组
		var myDiv = myTab.getElementsByTagName("div"); //数组

		for(var i = 0; i<myLi.length;i++){
			myLi[i].index = i;
			myLi[i].onclick = function(){
				for(var j = 0; j < myLi.length; j++){
					myLi[j].className="off";
					myDiv[j].className = "hide";
			    }
				this.className = "on";
				myDiv[this.index].className = "show";
		 	}
		}
   }
   var app = new Vue({
	   el: ".app",
	   data: {
		   butisshow:true,
		   obj: {},
		   loadingText: '',
		   page: 0, //当前分页页码
		   apiUrl: 'https://www.ymznkf.com/wx_server', //后端接口地址
		   id: '', //传值使用,方便存在本地的locakStorage
		   couponId: '',//优惠券id
		   del_id: '', //方便存在本地的locakStorage
		   openId:'',
		   nick:'',
		   issuccess:false,
		   orderNo:"",
		   data:{
			   appId:"",
			   timeStamp:"",
			   nonceStr:"",
			   package:"",
			   signType:"",
			   paySign:""
		   }
	   },
	   mounted() {
		   this.id=this.getQueryVariable("id")
		   this.couponId=this.getQueryVariable("couponId")
		   this.getdata()
		   this.getinfo()
	   },
	   methods: {
	   	ispay(){
		   	axios({
			   url:"../../system/order/orderDetails/all/findByopenId",
				method:"get",
				params:{
					openId:this.openId,
					productId:this.id
				}
			}).then((res)=>{
				console.log(res)
				if(res.data.obj.list.length>0){
					if(res.data.obj.list[0].useStatus==1){
						this.butisshow=false
					}
				}

			})
		},
		//观看视频
		video(item){
			if(this.butisshow){
				MobileUi.init({
					type:4,
					title:'提示',
					text:'您还未购买',
				})
			}else{
				window.location.href="./vid.html?id="+item.videoId+"&uid="+item.id
			}
		},
		getpayinfo(orderNo){
			axios({
				url:"../../system/order/pay/weiXinOrders",
				method:"get",
				params:{
					orderPrice:this.obj.realPrice,
					openId:this.openId,
					orderNo:orderNo
				}
			}).then((res)=>{
				this.onBridgeReady(res.data.obj.appid,res.data.obj.timeStamp,res.data.obj.nonce_str,res.data.obj.prepay_id,res.data.obj.trade_type,res.data.obj.sign)
			})
		},
		getinfo(){
			axios("/system/back/poster/manage/getWxUserInfo.do").then((res)=>{
				this.openId=res.data.obj.openid;
				this.nick=res.data.obj.nickname;
				this.ispay()
			})
		},
		xiadan(){
			axios({
				url:"../../system/back/order/all/doAdd",
				method:"get",
				params:{
					userName:this.nick,
					money:this.obj.realPrice,
					productId:this.obj.id,
					openId:this.openId,
					couponId:this.couponId
				}
			}).then((res)=>{
				if(res.data.success){
					this.orderNo=res.data.obj.dataLsh
					this.getpayinfo(res.data.obj.dataLsh)
				}
			})
		},
		onBridgeReady(appId,timeStamp,nonceStr,package,md5,paySign){
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId":appId ,     //公众号名称，由商户传入
						"timeStamp": timeStamp,         //时间戳，自1970年以来的秒数
						"nonceStr":nonceStr , //随机串
						"package":package ,
						"signType": md5,         //微信签名方式：
						"paySign":paySign  //微信签名
					},
					(res)=> {
						 if(res.err_msg == "get_brand_wcpay_request:ok" ) {//成功
							 this.paysuccess(this.orderNo)
						 }
					}
				);
			},
			paysuccess(orderNo){
				axios({
					url:"../../system/order/pay/queryOrderApp",
					method:"get",
					params:{
						orderNo:this.orderNo
					}
				})
				.then((res)=>{
					if(res.data.success){
						MobileUi.init({
							type:4,
							title:'提示',
							text:'购买成功',

						})
						location.reload();
					}else {
						MobileUi.init({
							type:4,
							title:'提示',
							text:'购买失败',

						})
					}
				})
			},
			getdata(){
				axios(`/app/product/prop/productDetail?id=${this.id}&couponId=${this.couponId}`)
				.then((res)=>{
					this.obj=res.data.obj
				})
			},
			getQueryVariable(variable){
			       var query = window.location.search.substring(1);
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){return pair[1];}
			       }
			       return(false);
			}
		}
	})
</script>
